<script lang="ts" setup>
import type { Rule } from 'ant-design-vue/es/form';
import type { ColumnsType, TableRowSelection } from 'ant-design-vue/es/table/interface';
import { reactive, ref } from 'vue';

const state = reactive({
  visible: false,
  loading: false,
  confirmLoading: false
});
const form = ref({
  roleName: ""
});
const filterValue = reactive({
  status: null as null | number,
  keyword: ""
});
const page = reactive({
  current: 10,
  total: 120
});
const rowSelection: TableRowSelection = {
  checkStrictly: true,
  columnWidth: 60,
  preserveSelectedRowKeys: false,
  onChange: () => {
    // TODO 复选框变化
  }
};
const table = reactive({
  rowSelection,
  loading: false,
  columns: [
    { title: "序号", dataIndex: "index", width: 80, align: 'center' },
    { title: "角色名称", dataIndex: "roleName" },
    { title: "创建人", dataIndex: "name" },
    { title: "创建日期", dataIndex: "createDate" },
    { title: "状态", dataIndex: "status", width: 100 },
    { title: "操作", dataIndex: "operation", width: 260 }
  ] as ColumnsType,
  data: [
    { index: 1, name: "开发者", roleName: "管理员", department: "技术部", status: true, createDate: "2022-01-01 15:11:12" },
    { index: 2, name: "李忠", roleName: "技术部主管", department: "技术部", status: true, createDate: "2022-01-01 15:11:12" },
    { index: 3, name: "李忠", roleName: "售后客服", department: "运营部", status: true, createDate: "2022-01-01 15:11:12" },
    { index: 4, name: "张飞", roleName: "售前客服", department: "运营部", status: true, createDate: "2022-01-01 15:11:12" },
  ]
});
const rules = reactive<Record<string, Rule[]>>({
  roleName: [{ required: true, message: '请输入菜单名称!' }]
});

// 搜索、条件变化
const onSearch = () => {

}

// 分页事件
const onPageChange = () => {
  console.log(page.current);
}

// 打开提交表单
const onShowFormDialog = (record?: any) => {
  form.value = {}
  state.visible = true;
}

// 确认提交表单
const onConfirmSubmitForm = async () => {
  try {
    formRef.value && await formRef.value.validate();
  } catch (error) {
    return
  }
  submitForm();
}

// 数据校验成功提交表单
const submitForm = async () => {
}
</script>
<script lang="ts">
export default { name: "roleManage" }
</script>

<template>
  <!-- 角色管理 -->
  <section class="container">
    <table-layout :show-filter="false" v-model:current="page.current" :total="page.total" @search="onSearch" @page-change="onPageChange">
      <!-- 自定义渲染表格头部按钮部分 -->
      <template #table-header-btn>
        <a-button danger>批量删除</a-button>
        <a-button type="primary" @click="onShowFormDialog()">+ 新增</a-button>
      </template>

      <!-- 自定义渲染表格部分 -->
      <template #table-content>
        <a-table :size="$config.TABLE_SIZE" bordered row-key="index" :pagination="false" :columns="table.columns" :data-source="table.data"
          :row-selection="table.rowSelection">
          <template #bodyCell="{ column, record }">
            <template v-if="column.dataIndex == 'status'">
              <a-switch v-model:checked="record.status" checked-children="启用" un-checked-children="停用" />
            </template>

            <template v-else-if="column.dataIndex == 'operation'">
              <a-button danger type="link">删除</a-button>
              <a-divider type="vertical" />
              <a-button type="link">编辑</a-button>
            </template>
          </template>
        </a-table>
      </template>
    </table-layout>
  </section>

  <a-modal @ok="onConfirmSubmitForm" :confirm-loading="state.confirmLoading" centered v-model:visible="state.visible"
    title="编辑角色">
    <div class="modal-body">
      <a-form ref="formRef" :rules="rules" :model="form" :label-col="{ span: 5 }">
        <a-form-item label="角色名称" name="name">
          <a-input v-model:value="form.roleName" />
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<style lang="less" scoped>
.container {
  height: 100%;
}
</style>